<!--
 * @Description: 福建地图
 * @Author: Colin
 * @Date: 2023-10-17 16:33:42
-->

<template>
  <div class="ht-base-echart">
    <button @click="drawEchart">绘制</button>
    <div :id="chartId" :style="{ height, width, ...barStyle }"></div>
    <div v-show="!chartData.length" class="no-data-tip">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
const FujianMap = require('./fujian_full.json')
export default {
  name: 'BaseEcharts',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    title: {
      type: String,
      default: ''
    },
    barStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    chartData: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  mounted() {
    this.initEchart()
    window.addEventListener('resize', () => {
      this.echart?.resize()
    })
  },
  activated() {
    this.echart?.resize()
  },
  data() {
    return {
      chartId: this.rndNum(10),
      echart: null // 挂载echart实例
    }
  },
  watch: {
    chartData: {
      handler() {
        this.drawEchart()
      },
      deep: true
    }
  },
  methods: {
    rndNum: function (n) {
      var rnd = ''
      for (var i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10)
      return rnd
    },
    initEchart: function () {
      if (!this.echart) {
        this.echart = echarts.init(document.getElementById(this.chartId))
      } else {
        this.echart.clear()
      }
    },
    setOptions: function () {
      // let that = this
      const options = {
        // 标题
        title: {
          text: '中国地图',
          left: 'center',
          subtext: '下载链接',
          sublink: 'http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5'
        },
        // 悬浮窗
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `${params.name}: ${params.value || 0}`
          }
        },
        // 图例
        visualMap: {
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        // 要显示的散点数据
        series: [
          {
            type: 'map',
            map: 'china',
            // 这是要显示的数据
            data: this.seriesData,
            // 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
            nameMap: {
              北京市: '北京重命名',
              天津市: '天津重命名'
            }
          }
        ]
      }
      this.echart.registerMap('福建', FujianMap)
      this.echart.setOption(options)
    },
    drawEchart() {
      this.echart.clear()
      this.setOptions()
    }
  }
}
</script>

<style scoped>
.ht-base-echart {
  position: relative;
  width: 100%;
  height: 100%;
}
.no-data-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
}
</style>
